<template>
  <div class="register_container flex">
    <sidebar title="开始注册" :step="step" />
    <main class="register_main flex flex-1 animate__animated animate__fadeInRightBig">
      <div class="content flex-1 flex-jucalic">
        <span class="step_title">步骤{{ step + 1 }}/4</span>
        <main1 :register="register" v-show="step == 0" />
        <main2 v-show="step == 1" v-model:desc="register.desc" v-model:work="register.work" />
        <main3 v-show="step == 2" v-model:company="register.company" />
        <main4 v-show="step == 3" v-model:members="register.members" />
      </div>
      <mainStep v-model:mainstep="step" @submit="submitStep" />
    </main>
  </div>
  <div class="register_success animate__animated animate__fadeInDownBig" v-if="step == 4">
    <img src="@/assets/imgs/registerBg.png" alt="">
    <span>恭喜你,注册成功!</span>
    <el-button type="primary" @click="sendHome">现在开始吧</el-button>
  </div>
</template>

<script setup lang="ts">
import sidebar from './sidebar.vue';
import mainStep from './main_step.vue';
import main1 from './main1.vue';
import main2 from './main2.vue';
import main3 from './main3.vue';
import main4 from './main4.vue';
import { ref, reactive, toRaw } from 'vue';
import { useRouter } from 'vue-router';
import { checkMain1, checkMain2, checkMain3 } from '@/hooks/registerHooks'
import { IRegister } from '@/types/register';
const step = ref(3)

const router = useRouter()
const register = reactive<IRegister>({
  email: "",
  password: "",
  phone: "",
  code: "",
  members: [{ value: "" }],
  desc: "",//描述
  work: "",//工作
  company: {//公司
    name: "",//名称
    direction: "",//业务方向
    size: 0,//公司规模
  }
})

/**
 * 跳转
 */
function submitStep() {
  switch (step.value) {
    case 0:
      checkMain1(register, step)
      break;
    case 1:
      checkMain2(register, step)
      break;
    case 2:
      checkMain3(register, step)
      break;
    case 3:
      step.value++;
      break;
  }
  console.log(toRaw(register));
  // 注册成功后跳转
  // step.value = 4

}
// 跳转到首页
function sendHome() {
  router.replace("/")
}
</script>

<style scoped lang="scss">
.register_container,
.register_success {
  width: 100%;
  height: 944px;
  gap: 20px;
  margin-top: 20px;
  overflow: hidden;

  .register_main {
    background-color: white;
    border-radius: 10px;
    flex-direction: column;

    .content {
      position: relative;
      flex-direction: column;
      gap: 15px;
      margin-top: -100px;

      .step_title {
        position: absolute;
        top: 160px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 40px;
        color: #3F8CFF;
        // font-weight: bold;
        font-size: 16px;
      }
    }

  }
}

.register_success {
  position: absolute;
  border-radius: 10px;
  top: -20px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;

  >img {
    width: 500px;
  }

  >span {
    font-weight: bold;
    color: #0A1629;
    font-size: 20px;
  }
}
</style>